<template>
    <div style="overflow: hidden">
        <!--树形控件-->
        <div style="width:20%;float:left;margin-bottom: 20px" v-loading="load">
            <el-input placeholder="输入关键字进行过滤" v-model="filterText" style="margin: 8px;width: 200px !important;">
            </el-input>
            <div class="qb" @click="allPro">全部</div>
            <el-tree class="filter-tree" style="margin:0px 10px" :data="categoryList" :id="proClassilyId"
                     :props="{id:'proClassilyId',children:'sonClassily',label:'proClassilyName'}"
                     :filter-node-method="filterNode" ref="tree" @node-click="findPro">
            </el-tree>
        </div>
        <div style="float: left;width:80%;margin-bottom: 20px">
            <el-table ref="multipleTable" :data="allProductList" v-loading="loading">
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="proDetailId" label="产品编号" align="center"></el-table-column>
                <el-table-column label="产品图片" prop="proImgSrc" align="center">
                    <template slot-scope="s">
                        <el-image :src="s.row.proImgSrc" style="width:50px;height:50px"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="product.productName" label="产品名称" align="center"></el-table-column>
                <el-table-column prop="product.productBrand" label="产品品牌" align="center"></el-table-column>
                <el-table-column prop="wareNum" label="库存数量" align="center"></el-table-column>
                <el-table-column prop="abilities" label="属性" align="center"  :show-overflow-tooltip="true">
                    <template slot-scope="s">
                        <span v-for="item in s.row.abilities" :key="item.abilityId">{{item.abilityName}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="出库数量" prop="outNum" align="center">
                    <template slot-scope="s">
                        <el-input type="number" v-model="s.row.outNum" placeholder="1" min="0" max="s.row.wareNum"></el-input>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="clear: both"></div>
        <el-button type="primary" style="margin-left:44%;" @click="save">保存</el-button>
        <el-button @click="cancel">取消</el-button>
    </div>
</template>

<script>
    export default {
        name:"out_add_product",
        data(){
            return{
                load:true,
                loading:true,
                //关键字过滤
                filterText: '',
                //产品列表数据
                allProductList:[],
                //树形控件，产品分类数据
                categoryList: [],
                //新增出库详情表数据
                wareDetail:{
                    outNum:0,
                    proDetail:{}
                },
                //根据树形结构查询产品关键字
                procid:0
            }
        },
        methods:{
            //根据树形结构查询产品
            findPro(data){
                this.procid=data.proClassilyId
                this.all_product();
            },
            allPro(){
                this.procid=0
                this.all_product()
            },
            //关键字过滤函数
            filterNode(value, data) {
                if (!value) return true;
                return data.proClassilyName.indexOf(value) !== -1;
            },
            //树形控件，产品种类查询
            classily(){
                this.load = true
                this.axios.get("api/product/classily-list").then(v=>{
                    this.categoryList=v.data;
                    this.load = false
                }).catch(() => {
                    this.load= false
                    this.global.mes_error("获取数据失败！")
                })
            },
            //产品列表查询
            all_product(){
                this.loading = true
                this.axios.get("api/product/product-list",{params:{"currPage":1,"pageSize":9999,"proClassilyId":this.procid}}).then(v=>{
                    this.allProductList=v.data.data;
                    this.total=v.data.total;
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                    this.global.mes_error("获取数据失败！")
                })
            },
            //清空出库详情表数据
            clear(){
                this.wareDetail = {
                    outNum:0,
                    proDetail:{}
                }
            },
            //确认按钮点击事件：将选中的商品添加到出库列表中
            save(){
                let select_data = this.$refs.multipleTable.selection;
                select_data.forEach(item => {
                    //是否添加的标识，为true则执行添加
                    let flag = true;
                    // 判断是否已经存在该商品，存在则直接修改数量
                    this.$store.state.vueDetail.wareDetailList.forEach(pro => {
                        // 根据商品id进行判断
                        if (pro.proDetail.proDetailId == item.proDetailId){
                            if(item.outNum<=item.wareNum&&item.outNum>0){
                                pro.outNum = parseInt(item.outNum);
                                flag = false
                                return;
                            }else{
                                this.global.mes_error("请正确填写出库数量");
                                return
                            }
                        }
                    })
                    // 列表中不存在该商品，执行添加
                    if(flag){
                        if(item.outNum!=null&&item.outNum<=item.wareNum&&item.outNum>0){
                            this.wareDetail.outNum = item.outNum;
                            this.wareDetail.proDetail=item;
                            this.$store.state.vueDetail.wareDetailList.push(this.wareDetail);
                        }else{
                            this.global.mes_error("请正确填写出库数量");
                        }
                    }
                    this.clear();
                })
                //清除勾选
                this.$refs.multipleTable.clearSelection();
                this.$store.state.vueDetail.detail_activeVisitable = false;
            },
            //取消新增
            cancel(){
                this.$refs.multipleTable.clearSelection();
                this.$store.state.vueDetail.detail_activeVisitable = false;
                this.clear();
            }
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        created(){
            this.all_product();
            this.classily();
        }
    }
</script>

<style>
    .qb{background:white;margin-left: 10px;margin-right: 10px;padding:3px 0px 3px 24px;cursor: pointer;color:rgb(100 100 100)}
    .qb:hover{background: rgb(245 245 245)}
</style>